<template>
    <div class="daily-brief">
      <h1>每日简报</h1>
      <el-card class="categories">
      <el-button
        v-for="(category, index) in categories"
        :key="index"
        @click="showBriefs(category)"
        plain
        size="mini"
        :type="selectedCategory === category ? 'primary' : 'default'"
        round
        class="category-btn"
      >
        {{ category }}
      </el-button>
    </el-card>
      <el-card v-if="filteredBriefs.length === 0" class="empty-card">
        <p slot="header">暂无简报</p>
      </el-card>
      <transition-group name="fade" tag="ul"
        v-loading="fullscreenLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <li v-for="(brief, index) in filteredBriefs" :key="index" class="brief-item" v-show="brief.show">
          <el-card class="brief-card">
            <p slot="header">{{ brief.title }}</p>
            <a :href="brief.content" target="_blank" class="custom-link">点我跳转</a>

            <p><strong>作者:</strong> {{ brief.author }}</p>
            <p><strong>时间:</strong> {{ brief.time }}</p>
          </el-card>
        </li>
      </transition-group>
    </div>
  </template>

  <script>
  import {getQQMessage,getWbHotMessage} from "../api/common";
  export default {
    data() {
      return {
        fullscreenLoading: false,
        dailyBrief: [], // 存储每日简报的数据
        categories: ['QQ新闻', '微博热搜', '其他'], // 模拟分类数据
        selectedCategory: "QQ新闻", // 存储当前选中的分类
      };
    },
    computed: {
      // 根据选中的分类过滤简报
      filteredBriefs() {
        return this.dailyBrief.filter(brief => brief.category === this.selectedCategory);
      },
    },
    created() {
      // 模拟从后端获取每日简报的 JSON 数据
      // 请将您的后端数据请求逻辑替换成实际的请求方法
      this.fetchDailyBrief();
    },
    methods: {
      // 模拟从后端获取数据的方法，请根据实际情况进行更改
      fetchDailyBrief() {
  // 假设您从后端获取到的 JSON 数据为 briefData
  getQQMessage().then(resp => {
    this.dailyBrief = resp;
    // 设置一个延时来触发动画效果
    this.triggerAnimation();
  }).catch(error => {
    console.error('Failed to fetch data:', error);
  });

},

openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 2000);
      },
      triggerAnimation() {
        this.dailyBrief.forEach((brief, index) => {
            if(this.dailyBrief[index].category != this.selectedCategory){
                setTimeout(() => {
                this.$set(this.dailyBrief[index], 'show', true);
            }, index * 100); // 每个简报间隔 300ms 触发动画效果
        }else{
                setTimeout(() => {
                this.$set(this.dailyBrief[index], 'show', true);
                }, index * 600);
            }
        });
      },
      showBriefs(category) {
        this.selectedCategory = category;
        this.openFullScreen1()
      },
    },
  };
  </script>

  <style>
  .category-btn {
  font-size: 12px;
  padding: 8px 12px;
}
  /* 添加美化样式和动画效果 */
  .daily-brief {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  h1 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
  }

  .categories {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .categories .el-button {
    margin: 0 8px;
  }
  .custom-link {
  color: #007bff; /* 修改链接文本颜色 */
  text-decoration: none; /* 移除下划线 */
  transition: color 0.3s ease-in-out; /* 添加颜色变化的过渡效果 */
}

.custom-link:hover {
  color: #ff7f50; /* 鼠标悬停时的链接文本颜色 */
  text-decoration: underline; /* 添加下划线 */
}
  .brief-item {
    margin-bottom: 20px;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .brief-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .empty-card {
    text-align: center;
    margin-bottom: 20px;
    opacity: 0.8;
  }
  </style>
